<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      /*
        原理：父元素显示：表格，垂直元素外围用一个div包装，该div设置显示：
              表格单元格，宽度：0.1％（保证最小宽度），右侧元素内部设置margin-right，右侧元素设置显示：table-cell。
        缺点：IE7及以下不支持，当display：tabletime，padding失效，父元素的line-height属性失效，
              当display：table-cell时，margin无效。
      */
      * {
        padding: 0;
        margin: 0;
      }
      .parent {
        display: table;
        width: 100%;
      }
      .box {
        display: table-cell;
        width: 0.1%;
      }
      .left {
        margin-right: 20px;
        background-color: red;
        height: 200px;
      }
      .right {
        display: table-cell;
        background-color: blue;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="box">
        <div class="left">126545453dddddddd453453453</div>
      </div>
      <div class="right">12121</div>
    </div>
  </body>
</html>
